<template>
	<div class="content">
		<mt-header fixed title="正确率">
		<mt-button icon="back" slot="left" @click="back"></mt-button>	
		</mt-header>
		<div class="head">
			
			<div class="avator">
				<img :src="userlogin.uface||'http://edu.ln139.com/face/small/118757170/1591836/0'" alt="头像" />
			</div>
			<p>正确率:{{ ave_zhengda }}</p>
		</div>
		<div class="nav">
			<span>班级最高：{{ Hzhengda }}</span>
			<span>班级最低：{{ Lzhengda }}</span>
			<span>班级平均：{{ class_ave_zhengda }}</span>
		</div>
		<div class="title">
			各科正确率对比
		</div>
		<div>
			<div id="myChart" :style="{width: '100%', height: '300px'}"></div>
		</div>
	</div>
</template>

<script>
	import { getStore } from '../../util/util'
	import { mapState, mapMutations } from 'vuex'
	let echarts =require('echarts/lib/echarts')
	// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
		data() {
			return {
				Xdata:[],
				valueData:[],
				Hzhengda:'',
				Lzhengda:'',
				ave_zhengda:'',
				class_ave_zhengda:''
			}
		},
		activated(){
			this.INIT_STATE();
			var arr=getStore('classInfo').zhengdaMap.lessonDetails;
			this.Hzhengda=getStore('classInfo').zhengdaMap.Hzhengda;
			this.Lzhengda=getStore('classInfo').zhengdaMap.Lzhengda;
			this.ave_zhengda=getStore('classInfo').zhengdaMap.ave_zhengda;
			this.class_ave_zhengda=getStore('classInfo').zhengdaMap.class_ave_zhengda;
			this.Xdata=arr.map(function(x){return x.coursename});
			this.valueData=arr.map(function(x){return parseInt(x.zhengda)});
			console.log(getStore('classInfo').zhengdaMap)
			this.drawLine()
		},
		mounted() {
			this.drawLine()
		},
		computed:{
			...mapState(['userlogin'])
		},
		methods: {
			...mapMutations(['INIT_STATE']),
			drawLine() {
				// 基于准备好的dom，初始化echarts实例
				let myChart = echarts.init(document.getElementById('myChart'))
				// 绘制图表
				myChart.setOption({
					title: {
						text: ''
					},
					tooltip: {},
					grid:{
						left:'15%',
						top:'10'
					},
					xAxis: {
						data: this.Xdata
					},
					yAxis: [{
						type: 'value',
						axisLabel: {
							show: true,
							interval: 'auto',
							formatter: '{value} %'
						},
						show: true
					}],
					series: [{
						name: '参与率',
						type: 'bar',
						itemStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient( 0, 0, 0, 1,
                        	[
                           	 	{offset: 0, color: '#FAD961'},
                            	{offset: 1, color: '#F76B1C'}
                        	]),
								label: {
									show: false,
									position: 'inside', //数据在中间显示
									formatter: '{c}%' //百分比显示
								}
							}
						},
						data: this.valueData,
						barWidth:'19px'
					}]
				});
			},
		back(){
			window.history.back()
		}
		}
	}
</script>

<style scoped>
	.head{
		height: 2rem;
		background-image: linear-gradient(-180deg, #FDC02B 0%, #FA8C13 100%);
		padding-top: 0.22rem;
		color: white;
	}
	.content{
		padding-bottom: 0;
	}
	.avator{
		width: 0.88rem;
		height: 0.88rem;
		border-radius: 0.44rem;
		background: rgba(123,23,170,0.5);
		margin: 0 auto;
		font-size: 16px;
		overflow: hidden;
	}
	.head>p{
		font-size: 14px
	}
	.nav{
		height: 40px;
    	font-size: 12px;
    	line-height: 40px;
	}
	.nav>span{
		font-size: 12px;
		color: #3C3C3C;
	}
	.title{
		width: 100%;
		height: 38px;
		text-align: center;
		font-size: 12px;
		line-height: 52px;
		color: #A5A5A5;
		background: url(../../assets/images/chartHead.png) no-repeat;
		background-size: contain;
	}
	#myChart{
		margin-top: 16px;	
	}
</style>